<template>
	<view class="wanlfind-follow-container">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}" :showGongNeng="true">
			<text slot="content" style="color: #000; width: 100%;padding-left: 20rpx;">
				核销列表
			</text>
		</wanl-navbar>
		<wanl-empty src="find_default3x" text="暂无数据 !" v-if="dataList.length === 0" />
		<view v-if="dataList.length > 0" class="wanlfind-follow-container__list">
			<view class="item padding-bj margin-bj bg-white" v-for="(item, index) in dataList" :key="item.id"
				style="margin: 0rpx 0;border-bottom: 1rpx solid #f8f8f8">
				<view style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
					<view class="cu-avatar margin-right-bj"
						:style="{backgroundImage: `url(${$wanlshop.oss(item.avatar, 88, 88)})`}"></view>
					<view class="subject">
						<view class="info">
							<view style="font-size: 34rpx">
								<!--							<view class="cu-tag sm wanl-bg-redorange radius margin-right-xs">自营</view>-->
								{{item.nickname}}
							</view>
							<view class="wanl-gray-light text-sm text-cut"
								style="margin-top: 30rpx;display: flex;justify-content: flex-start;align-items: center">
								<text>{{item.username}}</text>
							</view>
						</view>
						<view class="menu"
							style="display: flex;justify-content: flex-start;align-items: center;color: #FC6A24;">
							<u-icon name="plus" size="14" :color="'#FC6A24'" style="margin-right:4rpx"></u-icon>
							<text>{{item.money}}</text>
						</view>
					</view>
				</view>

				<view
					style="width: 100%;display: flex;justify-content: flex-end;align-items: center;margin-top: 20rpx;border-bottom: 1rpx solid #F8F8F8;">
					<view v-if="item.state=='1'"
						style="background: #327CFF;border-radius: 8rpx;padding: 8rpx 18rpx;color:#fff"
						@click="handleUser(item.order_no)">确定核销</view>
					<view v-if="item.state=='2'" style="border-radius: 8rpx;padding: 8rpx 18rpx;color:#02dc6b">已核销
					</view>

				</view>
				<wanl-modal custom :show="attendanceModalVisible">
					<view class="attendance-modal">
						<view class="modal-header">
							<!--					<image :src="$wanlshop.appstc('/common/cup.png')" mode="widthFix"></image>-->
						</view>
						<view class="modal-content text-sm wanl-gray"
							style="font-size: 38rpx;color:#333333;text-align: center;line-height: 48rpx">
							<view>{{ `是否确认核销` }}</view>
						</view>
						<view class="modal-btn" style="    display: flex;
    justify-content: space-around;">
							<button class="cu-btn wanl-bg-redorange round lg text-sm" style="  background: #f8f8f8;color: #999;  width: 44%;
    margin: 20px 0 0 0;" @tap="attendanceModalVisible = false">取消</button>
							<button class="cu-btn wanl-bg-redorange round lg text-sm" style="    width: 44%;
    margin: 20px 0 0 0;" @tap="attendanceModalVisible = false;hexiao()">确认</button>
						</view>
					</view>
				</wanl-modal>
			</view>
		</view>
		<view class="edgeInsetBottom"></view>
		<!-- 加载更多 -->
		<!--		<uni-load-more :status="status" :content-text="contentText" />-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				reload: false, //判断是否上拉
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '疯狂加载中...',
					contentnomore: ''
				},
				city: '',
				address: '',
				myloaction: {},
				total: 0, //数据量
				attendanceModalVisible: false
			}
		},
		onLoad() {
			this.current_page = 1;
			this.reload = true;
			this.dataList = [];
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			async loadData() {
				await uni.request({
					url: '/wanlshop/user/recharge_order_lists',
					method: 'POST',
					data: {
						pwd: uni.getStorageSync("hexiaoMima"),
						page: this.current_page,
						limit: '10'
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.loading = false;
						this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data
						.data); //数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';

					}
				});
			},
			handleUser(user_no) {
				if (uni.getStorageSync('hexiaoMima')) {
					this.attendanceModalVisible = true;
					this.order_id = user_no;
				}
			},
			hexiao() {
				uni.request({
					url: '/wanlshop/user/query_recharge',
					method: 'POST',
					data: {
						order_no: this.order_id,
						pwd: uni.getStorageSync('hexiaoMima')
					},
					success: res => {
						if (res.res.code == 1) {
							uni.showToast({
								title: '核销成功',
								icon: 'none'
							});
							this.current_page = 1;
							this.reload = true;
							this.dataList = [];
							this.loadData();
						} else {
							uni.showToast({
								title: '核销失败，请联系管理员',
								icon: 'none'
							})
						}
					}
				});
			}
		}

	}
</script>

<style lang="scss">
	.wanlfind-follow-container {
		&__list {
			.item {
				display: flex;
				align-items: center;
				flex-direction: column;

				.cu-avatar {
					width: 120rpx;
					height: 120rpx;
					flex-shrink: 0;
					background-color: #f9f9f9;
					border-radius: 50%;
				}

				.subject {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					flex: 1;
					height: 120rpx;

					.info {
						max-width: 400rpx;
					}

					.menu {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}

	.edgeInsetTop {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 30rpx 30rpx;
		background: #fff;
		border-top: 2rpx solid #F8F8F8;
	}
</style>